<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/css/index.css">
</head>

<body>
    <!-- 导航条 -->
    <nav>
        <ul class="navleft">
            <li><a href="#">中国大陆</a><i class="iconfont">&#xe616;</i></li>
            <li><a href="#" style="color: orangered;">亲，请登陆</a></li>
            <li><a href="#">免费注册</a></li>
            <li><a href="#">手机逛淘宝</a></li>
        </ul>
        <ul class="navright">
            <li><a href="#">我的淘宝<i class="iconfont">&#xe616;</i></a></li>
            <li><a href="#"><i class="iconfont">&#xe618;</i>购物车0</a><i class="iconfont">&#xe616;</i></li>
            <li><a href="#"><i class="iconfont">&#xe699;</i>收藏夹</a><i class="iconfont">&#xe616;</i></li>
            <li><a href="#">商品分类</a></li>
            <li><a href="#">免费开店</a></li>
            <li><a href="#">千牛卖家中心</a><i class="iconfont">&#xe616;</i></li>
            <li><a href="#">联系客服</a><i class="iconfont">&#xe616;</i></li>
            <li><a href="#"><i class="iconfont">&#xe632;</i>网站导航</a><i class="iconfont">&#xe616;</i></li>
        </ul>
    </nav>
    <div class="clear"></div>
    <div class="box">
        <main>
            <!-- 搜索栏 -->
            <div class="search">
                <div class="taobao">
                    <p>淘宝</p>
                    <p>taobao</p>
                </div>
                <div class="searched">
                    <p>宝贝<i class="iconfont">&#xe616;</i>
                        <input type="text" placeholder="多功能磨粉机专用">
                        <i class="iconfont">&#xe610;</i>
                        <input type="button" value="搜索" id="btn">
                    </p>
                    <ul class="searchli">
                        <li>新款连衣裙</li>
                        <li>四件套</li>
                        <li>潮流T恤</li>
                        <li>时尚女鞋</li>
                        <li>短裤</li>
                        <li>半身裙</li>
                        <li>男士外套</li>
                        <li>墙纸</li>
                        <li>行车记录仪</li>
                        <li>新款男鞋</li>
                        <li>耳机</li>
                        <li>时尚女包</li>
                        <li>沙发</li>
                    </ul>
                </div>
                <div class="bag">
                    <p>去领红包</p>
                    <img src="/img/1624876889(1).jpg" alt="">
                </div>
            </div>
            <!-- 左侧导航 -->
            <aside>
                <ul class="asideul">
                    <li class="title">主题市场
                        <ul>
                            <li><a href="#">女装</a> / <a href="#">内衣</a> / <a href="#">家居</a><i class="iconfont">&#xe601;</i></li>
                            <li><a href="#">女鞋</a> / <a href="#">男鞋</a> / <a href="#">箱包</a><i class="iconfont">&#xe601;</i></li>
                            <li><a href="#">母婴</a> / <a href="#">童装</a> / <a href="#">玩具</a><i class="iconfont">&#xe601;</i></li>
                            <li><a href="#">男装</a> / <a href="#">户外运动</a><i class="iconfont">&#xe601;</i></li>
                            <li><a href="#">美妆</a> / <a href="#">彩妆</a> / <a href="#">个护</a><i class="iconfont">&#xe601;</i></li>
                            <li><a href="#">手机</a> / <a href="#">数码</a> / <a href="#">企业</a><i class="iconfont">&#xe601;</i></li>
                            <li><a href="#">大家电</a> / <a href="#">生活电器</a><i class="iconfont">&#xe601;</i></li>
                            <li><a href="#">零食</a> / <a href="#">生鲜</a> / <a href="#">茶酒</a><i class="iconfont">&#xe601;</i></li>
                            <li><a href="#">厨具</a> / <a href="#">收纳</a> / <a href="#">清洁</a><i class="iconfont">&#xe601;</i></li>
                            <li><a href="#">家纺</a> / <a href="#">家饰</a> / <a href="#">鲜花</a><i class="iconfont">&#xe601;</i></li>
                            <li><a href="#">图书音像</a> / <a href="#">文具</a><i class="iconfont">&#xe601;</i></li>
                            <li><a href="#">医药保健</a> / <a href="#">进口</a><i class="iconfont">&#xe601;</i></li>
                            <li><a href="#">汽车</a> / <a href="#">二手车</a> / <a href="#">用品</a><i class="iconfont">&#xe601;</i></li>
                            <li><a href="#">房产</a> / <a href="#">装修家具</a> / <a href="#">建材</a><i class="iconfont">&#xe601;</i></li>
                            <li><a href="#">手表</a> / <a href="#">眼镜</a> / <a href="#">珠宝饰品</a><i class="iconfont">&#xe601;</i></li>
                        </ul>
                    </li>
                    <li>天猫</li>
                    <li>聚划算</li>
                    <li>天猫超市</li>
                    <li>|</li>
                    <li>司法拍卖</li>
                    <li>飞猪旅行</li>
                    <li>天天特卖</li>
                    <li>淘小铺</li>
                </ul>
            </aside>
            <!-- 中间 -->
            <div class="middle">
                <!-- 大轮播 -->
                <div class="bigswiper">
                    <img src="/img/1624876398(1).jpg" alt="">
                </div>
                <!-- 小轮播 -->
                <p class="text"><span>TMALL天猫</span>理想生活上天猫</p>
                <div class="smallswiper">
                    <img src="/img/1624876779(1).jpg" alt="">
                    <img src="/img/1624876798(1).jpg" alt="">
                </div>
            </div>
            <!-- 右边 -->
            <div class="mainright">
                <div class="top">
                    <ul>
                        <li><img src="/img/1624878872(1).jpg" alt=""></li>
                        <li>Hi!你好</li>
                        <li class="glod"><span>领淘金币抵钱</span> <span>会员俱乐部</span></li>
                        <li><button>登陆</button> <button>注册</button> <button>开店</button></li>
                        <img src="/img/1624876340(1).jpg" alt="">
                    </ul>
                </div>
                <div class="rightnav">
                    <ul>
                        <li>公告</li>
                        <li>规则</li>
                        <li class="underline">安全</li>
                        <li>公益</li>
                        <li>千牛</li>
                    </ul>
                    <p><span>魔豆妈妈公益项目</span> <span>让母爱永不打烊！</span></p>
                </div>
                <div class="tab">
                    <ul>
                        <li><i class="iconfont">&#xe650;</i>充话费</li>
                        <li><i class="iconfont">&#xe600;</i>旅行</li>
                        <li><i class="iconfont">&#xe656;</i>车险</li>
                        <li><i class="iconfont">&#xe66f;</i>游戏</li>
                    </ul>
                    <div class="clear"></div>
                    <div class="kuang">
                        <p><a href="#">充话费</a><a href="#">充流量</a><a href="#">充固化</a><a href="#">冲宽带</a></p>
                        <p><input type="text" placeholder="请输入手机号码"></p>
                        <p><select name="money" id="">
                        <option value="100元">100元</option>
                        <option value="200元">200元</option>
                        <option value="300元">300元</option>
                        <option value="500元">500元</option>
                        <option value="1000元">1000元</option>
                        <option value="10元">10元</option>
                        <option value="20元">20元</option>
                        <option value="30元">30元</option>
                        <option value="40元">40元</option>
                        <option value="50元" selected>50元</option>
                    </select>
                        </p>
                        <p class="price">售价￥
                            <span>49-49.8</span>
                        </p>
                        <button>立即充值</button>
                    </div>
                </div>
            </div>
            <div class="clear"></div>
            <!-- 有好货 -->
            <div class="goodshop">
                <h1>有好货<span>全民口碑</span></h1>
                <div class="goodshopbox">
                    <ul>
                        <li><img src="/img/1624877498.jpg" alt=""></li>
                        <li>Pure Cashmere 保暖针织帽</li>
                        <li>这款针织帽风格休闲可爱，帽口双面装饰设计，非常有层次感，带上也会更舒服，简约的外型，柔软的纯羊绒面料，既美观又保暖。</li>
                    </ul>
                    <ul>
                        <li><img src="/img/1624877513(1).jpg" alt=""></li>
                        <li>二胎家庭都在用这种床</li>
                        <li>软床质量很好很高档，很喜欢外观高档，工艺精湛，气味不大，直观上有档次，厚重。</li>
                    </ul>
                    <ul>
                        <li><img src="/img/1624877532(1).jpg" alt=""></li>
                        <li>周大福 简约蛇骨链</li>
                        <li>极简风格，雅致大气人人皆可驾驭。</li>
                    </ul>
                    <ul>
                        <li><img src="/img/1624877603.jpg" alt=""></li>
                        <li>凯蒂猫的新手机功能真多</li>
                        <li>Hello，亲爱的小朋友们！今天让我们和爸爸妈妈一起来玩新玩具吧。我们的凯蒂猫又有一台崭新的手机啦，你们看！功能真多呢，还能拍照呢！</li>
                    </ul>
                    <ul>
                        <li><img src="/img/1624877637(1).jpg" alt=""></li>
                        <li>便携战术防身扇，户外防身</li>
                        <li>钛扇的整体手感舒适，大扇骨起着决定性的作用，在传统竹制折扇的基础上，考虑实际使用时的握姿，结合科学的分析和测试，钛大扇骨的不同部位边缘，采用不同的曲面过渡，无论开启还是闭合，均确保手感温润如玉。</li>
                    </ul>
                </div>
                <div class="goodshoppic">
                    <img src="/img/1624877779(1).jpg" alt="">
                    <img src="/img/1624877789(1).jpg" alt="">
                    <img src="/img/1624877799(1).jpg" alt="">
                </div>
            </div>
        </main>
    </div>
</body>

</html>